//动态加载图片
(function($) {

	'use strict';

	var BootDynamicLoadPic = function(el,options){
		this.$el = $(el);
		this.options = $.extend(options);
		this.init = BootDynamicLoadPic.prototype.init;
		this.init();
	};

	BootDynamicLoadPic.version = '1.0';
	BootDynamicLoadPic.author = 'Mu Haitao';
	BootDynamicLoadPic.defaults = {};

	BootDynamicLoadPic.prototype = {
		constructor : BootDynamicLoadPic,

		init : function(){
//			var bodyDatas = ["<div class='lazy' data-original='"+this.options.filePath,".jpg' background-image: url(''"+this.options.filePath,".jpg') alt='","'/>",
//			     			"<a href=mainUI target='_blank' ></a>"];
//			var bodyDatas = ["<div class='lazy' data-original='"+this.options.filePath,".jpg' background-image: url('resources/grey.gif') alt='","'/>",
//			"<a href=mainUI target='_blank' ></a>"];
			var bodyDatas = ["<img src='"+this.options.filePath,".jpg' alt='","'/>",
			"<a href=mainUI target='_blank' ></a>"];
			for (var i = bodyDatas.length - 1; i >= 0; i--) {
				console.log(i+":"+bodyDatas[i]);
			};
			for (var index = this.options.fileCount; index >= 1; index--) {
				this.$el.append(bodyDatas[0]+index+bodyDatas[1]+index+bodyDatas[2])+index+bodyDatas[3];
			};
//			$(".lazy").wrap(bodyDatas[4]);
			$("img").wrap(bodyDatas[3]);
			$("a").wrap("<li></li>");
			$("li").wrapAll("<ul></ul>");
			$("ul").append("<img class='ri-loading-image' src='resources/loading.gif'/>");
			this.$el.wrapInner("<div id='ri-grid' class='ri-grid ri-grid-size-3'>");
			this.$el.wrapInner("<section class='main'></section>")
			.wrapInner("<div id='photoView' class='container' style='top:100px;'>")
			.append(
			"<div class='navbar-wrapper'>"+
		      "<div class='container'>"+
		        "<nav class='navbar navbar-inverse navbar-static-top'>"+
		          "<div class='container'>"+
		            "<div class='navbar-header'>"+
		              "<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>"+
		                "<span class='sr-only'>动态导航栏</span>"+
		                "<span class='icon-bar'></span>"+
		                "<span class='icon-bar'></span>"+
		                "<span class='icon-bar'></span>"+
		              "</button>"+
		             " <a class='navbar-brand' href='photoView' class='current'>我们的纪念日</a>"+
		            "</div>"+
		            "<div id='navbar' class='navbar-collapse collapse'>"+
		              "<ul class='nav navbar-nav'>"+
		                "<li class='active'><a href='showPlane'>婚纱照</a></li>"+
		                "<li><a href='show3D'>结婚录像</a></li>"+
		                "<li><a href='#contact'>结婚纪要</a></li>"+
		                "<li class='dropdown'>"+
		                  "<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>其他<span class='caret'></span></a>"+
		                  "<ul class='dropdown-menu'>"+
		                    "<li><a href='mainUI'>主页</a></li>"+
		                    "<li><a href='#'>编程</a></li>"+
		                   " <li><a href='#'>链接</a></li>"+
		                  "</ul>"+
		               " </li>"+
		              "</ul>"+
		            "</div>"+
		          "</div>"+
		        "</nav>"+
		     " </div>"+
		    "</div> ")
		    .append("<div class='container marketing' style='top:"+(parseInt($(".navbar-wrapper").height())+parseInt(50))
		    		+"px;'><footer> <p class='pull-right'><a href='#'>跳转到顶部</a></p> <p style='text-align:center;'>&copy; 2016 Company, "+
    		"Inc. &middot; <a href='#'>陈艳</a> ❤  <a href='#'>穆海涛</a></p></footer></div>")
    		.append("<div id='loading'></div>");
			$(".navbar-wrapper").insertBefore($("#photoView"));
			console.log(this.$el);
			return this;
		},
		
		lazyLoad : function(){
			
		}
		
	};

	
	$.fn.bootDynamicLoadPic = function(options){    	
    	return new BootDynamicLoadPic(this,options);
    }
}(jQuery));